<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="../jQuery/js/jquery-1.3.2.min.js"></script>
		
		<script type="text/javascript" src="../jQuery/plugin/layout/jquery.layout.js"></script>
		
		<script type="text/javascript" src="../jQuery/flexigrid-1.1/js/flexigrid.js"></script>
		<link rel="stylesheet" type="text/css" href="../jQuery/flexigrid-1.1/css/flexigrid.css" />
		
		<link rel="stylesheet" type="text/css" href="../jQuery/plugin/layout/layout-default-latest.css" />
		
		<script type="text/javascript">
			$(function() {
				$('body').layout({ applyDefaultStyles: true });
			});
		</script>
		
	</head>
	<body>
		<DIV class="ui-layout-center">
			<table id="grid" style="font-size: 12px"></table>
		</DIV>
		<DIV class="ui-layout-north">North</DIV>
		<DIV class="ui-layout-south">South</DIV>
		<DIV class="ui-layout-east">East</DIV>
		<DIV class="ui-layout-west">West</DIV>
		
		
		<script type="text/javascript">
			$("#grid").flexigrid({
				url: '../basic/UserAction/jquerySearch.action',
				dataType: 'json',
				colModel: [
				   {display:'ID', name:'id', width: 20, sortable : true, align: 'center'},
				   {display:'userName', name:'userName', width: 200, sortable : true, align: 'center'},
				   {display:'password', name:'password', width: 300, sortable : true, align: 'center'}
				],
				buttons:[
					{name: 'Add', bclass: 'add', onpress : test},   
					{name: 'Delete', bclass: 'delete', onpress : test},   
					{separator: true}   
				],
				searchitems : [   
	                {display: '地点', name : 'userName', isdefault: true}   
                ],
                usepager: true,
                title: '用户',
                useRp: true,
                rp: 15,
                showTableToggleBtn: true
			});

			function test(comond, grid) {
				alert(comond);
			}
		</script>
	</body>
</html>

<!-- 
{"total":200,"page":2,"rows":[{"id":1,"cell":[1,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":2,"cell":[2,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]},{"id":3,"cell":[3,"Key Account Manager/大客户经理（CFC）  ","北京","5-10年","面议"]}]}

url: 'http://localhost:8080/Flexigrid/DBServlet' ajax访问的url 
dataType: 'json', 响应的数据类型 
colModel [....] 表格中显示列的设置.... 
buttons 按钮设置 根据业务不同 添加适合业务的按钮 
searchitems 查询下拉列表中的选项设置 
usepager: true, 是否分页 
title: '最新职位', 表头 
useRp: true, 用户自定义分页 
rp: 15, 每页显示多少数据 
showTableToggleBtn: true, 略 
width: 700, 略 
height: 200 略

 -->

 
